<template>
  <div class="booking-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>预约管理</span>
        </div>
      </template>
      <div class="content-body">
        <!-- 搜索和筛选区域 -->
        <div class="search-filter">
          <el-select v-model="queryParams.status" placeholder="选择状态" style="width: 120px; margin-right: 10px;">
            <el-option label="全部" value="" />
            <el-option label="已预约" value="0" />
            <el-option label="已撤销" value="1" />
            <el-option label="已完成" value="2" />
            <el-option label="已拒绝" value="3" />
          </el-select>
          <el-button type="primary" @click="getList">搜索</el-button>
        </div>
        
        <!-- 预约列表 -->
        <el-table :data="tableData" style="width: 100%; margin-top: 20px;">
          <el-table-column prop="id" label="预约ID" width="80" />
          <!-- <el-table-column prop="userName" label="用户姓名" width="120" /> -->
          <el-table-column prop="coachName" label="教练名称" width="120" />
          <el-table-column prop="location" label="教练位置" width="180" />
          <el-table-column prop="bookingDate" label="预约日期" width="160" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag 
                :type="getTagType(scope.row.status)"
              >
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template #default="scope">
              <el-button type="primary" size="small" @click="handleViewBooking(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination" style="margin-top: 20px; text-align: right;">
          <el-pagination 
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>

    <!-- 预约详情弹窗 -->
    <el-dialog 
      v-model="detailVisible" 
      title="预约详情" 
      width="500px"
    >
      <el-descriptions :column="1" :border="true">
        <el-descriptions-item label="预约ID">{{ selectedBooking.id }}</el-descriptions-item>
        <el-descriptions-item label="预约人">{{ selectedBooking.userName }}</el-descriptions-item>
        <el-descriptions-item label="教练名称">{{ selectedBooking.coachName }}</el-descriptions-item>
        <el-descriptions-item label="场地地址">{{ selectedBooking.location }}</el-descriptions-item>
        <el-descriptions-item label="预约日期">{{ selectedBooking.bookingDate }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getTagType(selectedBooking.status)">
            {{ getStatusText(selectedBooking.status) }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <!-- 只有状态为"已预约"(0)时才显示同意和拒绝按钮 -->
          <el-button v-if="selectedBooking.status === '0'" type="primary" @click="handleApproveBooking(2)">同意</el-button>
          <el-button v-if="selectedBooking.status === '0'" type="danger" @click="handleApproveBooking(3)">拒绝</el-button>
          <el-button @click="detailVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { useGlobalStore } from '../store/userInfo'
import { coachBookingList ,coachBookingDetails,approveBooking} from '@/request/coach.js'


// 表格数据
const total = ref(0)
const courts = ref([])
const tableData = ref([])
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  status: '',
  bookingDate: ''
})

const getList =()=>{
  coachBookingList(queryParams).then(res => {
    console.log(res)
    tableData.value = res.records
    total.value = res.total
  })
}

getList();


const detailVisible = ref(false)
const selectedBooking = ref({})


// 预约表单
const bookingForm = reactive({
  userName: '',
  courtId: '',
  bookingDate: '',
  startTime: '',
  endTime: '',
  description: ''
})


// 获取状态对应的标签类型
const getTagType = (status) => {
  switch (status) {
    case 'booked': return 'primary'
    case 'completed': return 'success'
    case 'cancelled': return 'danger'
    default: return 'info'
  }
}

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case '0': return '已预约'
    case '1': return '已撤销'
    case '2': return '已使用'
    case '3': return '已拒绝'
    default: return '未知状态'
  }
}

// 查看预约详情
const handleViewBooking = (booking) => {
  //selectedBooking.value = { ...booking }
  detailVisible.value = true
  coachBookingDetails(booking.id).then(res=>{
    console.log('res====',res)
    selectedBooking.value = { ...selectedBooking.value,...res }
  })
}

// 同意预约
const handleApproveBooking = (status) => {
  const msg = status=='2'?'确定要同意这个预约吗？':'确定要拒绝这个预约吗？'
  ElMessageBox.confirm(msg, '确认操作', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'success'
  }).then(() => {
    approveBooking(selectedBooking.value.id,status).then(res=>{
        ElMessage.success('操作成功')
        detailVisible.value = false
        getList()
    }).catch(()=>{
      ElMessage.error('操作失败')
    })
  }).catch(() => {
    
  })
}





// 分页相关方法
const handleSizeChange = (size) => {
  queryParams.value.pageSize = size
  ElMessage.info(`每页显示 ${size} 条数据`)
}

const handleCurrentChange = (current) => {
  queryParams.value.pageNum = current
  ElMessage.info(`当前页码: ${current}`)
}

</script>

<style scoped>
.content-body {
  padding-top: 10px;
}

.search-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
</style>